<template>
  <div class="FooterMusic">
    <!-- 版心 -->
    <div class="footerMusicContainer">
      <div class="footerLeft">
        <svg class="icon sys" aria-hidden="true">
          <use xlink:href="#icon-shangyishou_huaban"></use>
        </svg>
        <svg
          class="icon zanting"
          aria-hidden="true"
          @click="play"
          v-if="isbtnShow"
        >
          <use xlink:href="#icon-zanting"></use>
        </svg>
        <svg class="icon zanting" aria-hidden="true" @click="play" v-else>
          <use xlink:href="#icon-zanting_huaban"></use>
        </svg>
        <svg class="icon xys" aria-hidden="true">
          <use xlink:href="#icon-xiayishou_huaban"></use>
        </svg>
      </div>
      <div class="footerMiddle">
        <img class="footerImg" :src="playList.picUrl" alt="" />
        <div class="play">
          <div class="playName">
            <span class="name">{{ playList.name }}</span>
            <span class="mv">
              <span class="mvName">mv</span>
              <svg class="icon zanting" aria-hidden="true">
                <use xlink:href="#icon-bofangMV"></use>
              </svg>
            </span>
          </div>
          <div class="playInput">
            <input
              class="range"
              type="range"
              min="0"
              :max="duration"
              step="0.05"
              v-model="currentTime"
              :format-tooltip="realFormatSecond"
              @change="updateTime()"
            />
            <div class="time">
              <span>{{ time().ct }}</span> / <span>{{ time().dt }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="footerRight">
        <div class="block">
          <el-slider
            v-model="volume"
            vertical
            height="90px"
            :step="0.01"
            :max="1"
            :format-tooltip="handelVoice"
            @input="voiceChange()"
          >
          </el-slider>
        </div>
        <svg class="icon yinliang" aria-hidden="true">
          <use xlink:href="#icon-yinliang"></use>
        </svg>
        <div class="yl">
          <div class="block ylRange">
            <el-slider
              v-model="volume"
              :max="1"
              input-size="mini"
              :step="0.01"
              @input="addVolume()"
              :format-tooltip="handelVoice"
            >
            </el-slider>
          </div>
        </div>
        <svg class="icon liebiaoxunhuan" aria-hidden="true">
          <use xlink:href="#icon-liebiaoxunhuan"></use>
        </svg>
        <div class="lb">
          <item-music-list :itemList="itemList" />
        </div>
        <svg class="icon bofangliebiao" aria-hidden="true">
          <use xlink:href="#icon-bofangliebiao"></use>
        </svg>
      </div>
    </div>
    <audio
      ref="audio"
      :src="`https://music.163.com/song/media/outer/url?id=${id}.mp3`"
    ></audio>
  </div>
</template>

<script src="../../public/moment.js"></script>
<script>
import ItemMusicList from "@/components/ItemMusicList.vue"
import { mapMutations, mapState } from "vuex"
export default {
  components: { ItemMusicList },
  data() {
    return {
      interVal: 0,
      volume: 1,
    };
    
  },
  mounted() {
    // console.log("playList:", this.playList)
    // console.log("audio:", this.$refs)
    this.time()
  },
  updated() {
    this.addDuration()
    this.time()
    this.addVolume()
    // this.value = this.volume
    // console.log(this.time());
  },
  computed: {
    ...mapState([
      "playList",
      "id",
      "isbtnShow",
      "duration",
      "currentTime",
      "itemList",
    ]),
  },
  methods: {
    ...mapMutations(["updateIsBtnShow", "updateCurrentTime", "updateDuration"]),
    // 判断音乐是否播放
    play() {
      if (this.$refs.audio.paused) {
        this.$refs.audio.play()
        this.updateIsBtnShow(false)
        this.updateTime() //播放进行传值
      } else {
        this.$refs.audio.pause()
        this.updateIsBtnShow(true)
        clearInterval(this.interVal) // 暂停计时器
      }
    },
    // 拖动音量滚动条
    voiceChange() {
      this.$refs.audio.volume = this.volume;
    },
    // 处理音量显示
    handelVoice() {
      return parseInt(this.volume.toFixed(2) * 100);},
    // 更新音量
    addVolume() {
      this.$refs.audio.volume = this.volume
    },
    // 拖曳音量处理音量显示
    handelVoice() {
      return parseInt(this.volume.toFixed(2) * 100)
    },
    // 更新总时长
    addDuration() {
      this.updateDuration(this.$refs.audio.duration)
    },
    // 更新当前时间
    updateTime() {
      this.interVal = setInterval(() => {
        this.updateCurrentTime(this.$refs.audio.currentTime)
      }, 1000)
    },
    realFormatSecond(second) {
        console.log('自动播放触发', second);
        this.currentTime = second;
        return realFormatSecond(second);
      },
    // 时长转分钟
    time() {
      let dt = moment.unix(this.duration).format("mm:ss");
      let ct = moment.unix(this.currentTime).format("mm:ss");
      return { dt, ct };
    },
  },
}
</script>

<style lang="scss" scoped>
.FooterMusic {
  z-index: 999;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 70px;
  background-image: linear-gradient(#4c4c4c, #2b2b2b);
  position: fixed;
  bottom: 0;
  .footerMusicContainer {
    width: 1100px;
    height: 100%;
    display: flex;
    margin: 0 auto;
    .footerLeft {
      width: 137px;
      height: 100%;
      color: #ccc;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 30px;
      .zanting {
        font-size: 40px;
      }
      .sys:hover,
      .xys:hover {
        font: 800;
        color: #fff;
      }
      .zanting:hover {
        font: 800;
        color: #fff;
      }
    }
    .footerMiddle {
      height: 100%;
      width: 666px;
      display: flex;
      align-items: center;
      .footerImg {
        height: 50px;
        border-radius: 50%;
        margin-left: 20px;
        box-shadow: 0 0 2px 2px #000;
      }
      .play {
        height: 100%;
        width: 596px;
        .playName {
          width: 100%;
          height: 30px;
          color: #ccc;
          display: flex;
          justify-content: space-between;
          .name {
            overflow: hidden;
            white-space: nowrap;
            margin-top: 8px;
            margin-left: 32px;
          }
          .mv {
            font-size: 18px;
            margin-right: 32px;
            margin-top: 8px;
            display: flex;
            .mvName {
              font-size: 16px;
            }
          }
        }
        .playInput {
          width: 100%;
          position: relative;
          .range {
            width: 90%;
            height: 4px;
            display: block;
            margin: 0 auto;
          }
          .time {
            color: #ccc;
            position: absolute;
            right: 15px;
            top: 12px;
            width: 100px;
          }
        }
      }
    }
    .footerRight {
      position: relative;
      width: 297px;
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      color: #ccc;
      font-size: 20px;
      .yinliang:hover,
      .liebiaoxunhuan:hover,
      .bofangliebiao:hover {
        color: #fff;
      }
      .block {
        position: absolute;
        bottom: 72px;
        left: 28px;
      .yinliang:hover .yl {
        display: block;
        z-index: 30000;
      }
      .yl {
        width: 100px;
        height: 30px;
        border-radius: 2px;
        line-height: 100px;
        z-index: 2000;
        bottom: 72px;
        left: 58px;
        .ylRange {
          position: absolute;
          bottom: 51px;
          left: 37px;
          height: 3px;
          width: 100px;
          z-index: 2000;
        }
      }
      .lb {
        width: 250px;
        height: 300px;
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        bottom: 70px;
        border-top-left-radius: 0.4rem;
        border-top-right-radius: 0.4rem;
        overflow: scroll;
      }
    }
  }
}
.el-slider__button {
  width: 10px !important;
  height: 10px !important;
}
/*滚动条样式*/
::-webkit-scrollbar {
  width: 4px;
  /*height: 4px;*/

}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
  background: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
  border-radius: 0;
  background: rgba(0, 0, 0, 0);
}
</style>
